<!-- Created by henian.xu on 2018/11/15. -->

<template>
    <div>
        <div class="cms-list pa-a">
            <template v-for="item in articleList">
                <linker
                    tag="div"
                    :to="`/cms/${item.cmsCatalogId}/${item.id}`"
                    class="item"
                    :key="item.id">
                    <div class="extra">{{ item.insertTime | moment('YYYY-MM-DD HH:mm:ss') }}</div>
                    <div class="label">{{ item.title }}</div>
                </linker>
            </template>
        </div>

        <div class="ta-r">
            <Paginate
                v-model="pagination.currentPage"
                :pager-count="5"
                :page-size="pagination.pageSize"
                :total-pages="pagination.totalPages"
                :total-rows="pagination.totalRows"/>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            currentPage: 99,
            pagination: {},
            articleList: [],
        };
    },
    computed: {
        catId() {
            return this.$route.params.catId;
        },
    },
    watch: {
        catId: {
            handler() {
                this.pagination = {};
                this.getListData();
            },
            immediate: process.client,
        },
    },
    methods: {
        getListData({ id = this.catId, currentPage, pageSize } = {}) {
            return this.$axios
                .get('/rpc/buyer/pt/cms/findCmsArticleList', {
                    id,
                    currentPage: currentPage || (this.pagination.currentPage ? this.pagination.currentPage + 1 : 1),
                    pageSize,
                })
                .then(json => {
                    const res = json.data;
                    this.articleList = res.data;
                    this.pagination = res.pagination;
                });
        },
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';
.cms-list {
    > .item {
        line-height: 40px;
        cursor: pointer;
        @include clearfix;

        > .extra {
            float: right;
        }
        &:hover {
            color: $color-main;
        }
    }
}
</style>
